<template>
  <el-row class="bg-blue-600 min-h-screen">
    <el-col :lg="14" class="span-14">
      <div class="title">欢迎光临</div>
      <div class="intro">这是我的后台管理项目</div>
    </el-col>
    <el-col :lg="10" class="bg-light-200 span-10">
      <h2 class="font-bold text-3xl mb-2">欢迎回来</h2>
      <span></span>
      <span class="text-gray-400 mb-1">账号密码登录</span>
      <span></span>
      <el-form ref="formRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item class="w-[250px]" prop="Username">
          <el-input v-model="form.Username" placeholder="请输入用户名">
           <template #prefix>
            <el-icon><User /></el-icon> 
           </template>
         </el-input>
        </el-form-item>
        <el-form-item class="w-[250px]" prop="Password">
          <el-input v-model="form.Password" placeholder="请输入密码">
            <template #prefix>
            <el-icon><Lock /></el-icon>
            </template>
         </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            class="w-[250px] rounded-3xl"
            :loding="loading"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

 <script  setup>
 import { onMounted, onUnmounted, reactive, ref } from "vue";
//导入登录方法
 import { login,getInfo } from '@/api/manager'
import { useRouter } from "vue-router";
import { setToken } from "@/composible/cookie";
import {  usemainStore } from '@/stores/mainStore'
import {notify} from '@/composible/notify'
//当前路由
const router = useRouter();
//mainStore
const mainStore = usemainStore();
//判断按钮是否再加载
const loading = ref(false);
// do not use same name with ref
const form = reactive({
  Username: "",
    Password: ""
});

//点击submit按钮时触发
const formRef = ref(null);
const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) return false;
        //请求之前设置loading为true
        loading.value = true;
        login(form.Username, form.Password).then((res) => {
           console.log(res.token);
           //获取token
           setToken(res.token);
            //获取user信息并保存到pinia库中
           mainStore.getUser();
            //跳转到后台首页
           router.push('/');
              notify("success", "登录成功");
         }).finally(() => {
            loading.value = false;
        }) 
    })
};
const rules = {
    Username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
   ],
    Password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
   ]
}

//使用enter键登录
function onKeyUp(e)
{
  
   if (e.key === 'Enter')
   {
     onSubmit();
   }
}
 onMounted(() => {
    document.addEventListener("keyup", onKeyUp);
})

 onUnmounted(() => {
    document.removeEventListener("keyup", onKeyUp);
})

</script>


<style lang="less" scoped>
.span-14 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title {
    @apply text-light-300 text-5xl font-bold mb-4;
  }

  .intro {
    @apply text-light-100 text-2xl;
  }
}

.span-10 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>@/composible/cookie